<!-- 搜索框组件 -->
<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import http_search from '@/api/search.js'
import companyCardContainer from '@/components/companyCardContainer.vue'
import http_posts from '@/api/posts.js'
import http_company from '@/api/company.js'
import PostsCardDetailContainer from '@/components/PostsCardDetailContainer.vue'
import router from '@/router/index.js'

const route = useRoute()

// 获得搜索数据
const getSearchContent = async (key, city) => {
  const result = await http_search.getSearchContent(key, city)
  if (result.code === 200) {
    companyList.value = result.data.company
    postsLst.value = result.data.posts
    for (let i = 0; i < companyList.value.length; i++) {
      getPostsByCompanyId(companyList.value[i].companyId)
      getAuthByCompanyId(companyList.value[i].companyId)
    }
  }
}
// 获得公司对应的职位
const getPostsByCompanyId = async (companyId) => {
  const result = await http_posts.getByCompanyId(companyId)
  if (result.code === 200) {
    companyPostsNumberList.value.push(result.data.length)
    postsLst.value = [...postsLst.value, ...result.data]
  }
}
// 获得公司人员数量
const getAuthByCompanyId = async (companyId) => {
  const result = await http_company.getAuthNumber(companyId)
  if (result.code === 200) {
    companyAuthNumberList.value.push(result.data)
  }
}
// 职位对应公司的信息
const postsToCompanyInfo = (companyId) => {
  for (let i = 0; i < companyList.value.length; i++) {
    if (companyList.value[i].companyId === companyId) {
      return companyList.value[i]
    }
  }
  http_company.getCompanyById(companyId).then((response) => {
    companyList.value.push(response.data)
    return response.data
  })
}
const companyList = ref([]) //公司列表
const postsLst = ref([]) //职位列表
const companyPostsNumberList = ref([]) //公司职位数量
const companyAuthNumberList = ref([]) //公司人员数量

onMounted(() => {
  if (route.query.city !== '' && route.query.key !== '') {
    getSearchContent(route.query.city, route.query.key)
  }
})
</script>

<template>
  <div class="searchBox">
    <div style="margin-left: 250px">
      <div
        style="margin-bottom: 15px"
        v-for="(item, index) in companyList"
        :key="index"
        @click="
          router.push({
            path: '/companyInfo',
            query: { companyId: item.companyId }
          })
        "
      >
        <companyCardContainer
          :postsNumber="companyPostsNumberList[index]"
          :bossNumber="companyAuthNumberList[index]"
          :data="item"
        />
      </div>
      <div
        @click="
          router.push({
            path: '/postsInfo',
            query: { postsId: item.postsId }
          })
        "
        v-for="item in postsLst"
        :key="item.postsId"
      >
        <PostsCardDetailContainer
          :postsData="item"
          :companyData="postsToCompanyInfo(item.companyId)"
        />
      </div>
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.searchBox {
  width: 100%;
  background-color: #e2f2f5;
  padding-bottom: 5px;
  padding-top: 15px;
  display: flex;
}
</style>
